<template>
	<view class="upload-view">
		<view class="upload">
			<form @submit="ooSubmit">
				<van-field
					label="标题"
					:value="state.article.tatle"
					@change="handleInput('tatle', $event)"
					required
					maxlength="30"
					clearable
					placeholder="标题 (必填)"
				/>
				<van-field
					label="内容"
					:value="state.article.content"
					@change="handleInput('content', $event)"
					required
					maxlength="3000"
					type="textarea"
					placeholder="请尽情地发挥吧..."
					:autosize="{ minHeight: 100 }"
				/>
				<van-picker
					show-toolbar
					title="文章分类"
					:columns="category"
					@change="chageCate"
					@confirm="chageCate"
					:default-index="index"
				/>
				<van-button type="info" round block form-type="submit"
					>保存</van-button
				>
			</form>
		</view>
	</view>
</template>

<script setup>
// vue3小程序生命周期函数
import { onShareAppMessage, onLoad, onShow, onHide } from '@dcloudio/uni-app'
import { reactive, ref, computed } from 'vue'
import { addArticleApi, uploadArticleApi, articleDetailsApi  } from '../../api/modules/article'
const state = reactive({
	article: {
		uid: '',
		tatle: '',
		content: '',
		className: '开发者'
	}
})

const index = computed(( )=> category.value.findIndex(item => item === state.article.className))
const category = ref([
	'开发者',
	'设计',
	'iOS',
	'android',
	'后端',
	'php',
	'面试',
	'c+ +',
	'测试开发',
	'css',
	'区块链',
	'数据库',
	'go',
	'产品',
	'linux',
	'人工智能',
	'JavaScript',
	'框架',
	'前端',
	'python',
	'Java',
	'算法',
	'科技动态',
	'js',
	'数码产品',
	'html',
	'软件测试'
])

const selectChage = e => {
	state.article.className = e.detail
}

const chageCate = (e) => {
	const { value } = e.detail
	state.article.className = value
}

const handleInput = (name, e) => {
	const value = e.detail
	state.article[name] = value
}
const init = async (uid) => {
	const { data } = await articleDetailsApi({uid})
	state.article = data
}
const ooSubmit = async () => {
	try {
		state.article.uid ? await uploadArticleApi(state.article) : await addArticleApi(state.article)
		uni.$Toast(state.article.uid ? '修改成功' : '新增成功')
		state.article.uid
			? uni.reLaunch({ url: '/subpkg/my-work/my-work' })
			: uni.switchTab({ url: '/pages/home/home' })
	} catch (e) {
		uni.$Toast('发布失败')
	}
}
// 页面加载
onLoad(message => {
	state.article.uid = message.uid
	if (message.uid) {
		init(message.uid)
	}
})

// 页面显示
onShow(() => {})

// 页面隐藏
onHide(() => {})

// 页面分享(不定义该函数 页面将无法分享)
onShareAppMessage(() => {})
</script>

<style lang="scss">
.van-cell__title {
	max-width: 2.2em !important;
	min-width: 2.2em !important;
}

.category {
	display: flex;
	justify-content: space-between;
	margin-top: 24rpx;
	margin-left: 24rpx;
}
.upload {
	padding: 24rpx;
	:deep(.van-uploader) {
		margin-top: 24rpx;
	}
	.bg-default {
		display: flex;
		align-items: center;
		margin-top: 24rpx;
		margin-left: 24rpx;
		.title {
			font-size: 32rpx;
		}
		.upload-image {
			width: 200rpx;
			height: 200rpx;
			margin-left: 24rpx;
		}
	}
	.add_img_view {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		margin-top: 24rpx;
		margin-left: 24rpx;
		.add_img_item {
			width: calc(50% - 12rpx);
			height: 240rpx;
			margin-bottom: 24rpx;
			position: relative;
			margin-left: 12rpx;
			image {
				width: 100%;
				height: 100%;
			}
			.add_close {
				width: 32rpx;
				height: 32rpx;
				position: absolute;
				right: 15rpx;
				top: 15rpx;
			}
		}
	}
	.van-button {
		margin-top: 24rpx;
	}
}
</style>
